//薪资树状图
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('salary'));
//封装一个数据函数
async function salary() {
    const res = await axios.get('student/list')
    const { data } = res.data
    console.log(data);
    //获取姓名
    const name = data.map(e => e.name)
    //获取期望薪资
    const salary = data.map(e => e.salary)
    //获取实际薪资
    const trueSalary = data.map(e => e.truesalary)
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '薪资',
            textStyle: {
                color: '#6d767e'
            }
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 30,
                end: 70,
                xAxisIndex: [0, 1]
            },
            {
                type: 'inside',
                realtime: true,
                start: 30,
                end: 70,
                xAxisIndex: [0, 1]
            }
        ],
        tooltip: {
            trigger: 'axis'
        },
        legend: {},
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: name
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '期望薪资',
                type: 'line',
                stack: 'Total',
                smooth: true,
                symbol: 'none',
                data: salary,
                itemStyle: {
                    color: 'blue',
                }

            },
            {
                name: '实际薪资',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: trueSalary,
                itemStyle: {
                    color: 'red',
                }
            }
        ],

    };;

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
// 指定图表的配置项和数据
const colors = ['#5470C6', '#EE6666'];

salary()
//获取i标签的id
const switc = document.querySelector('#switch')
switc.addEventListener('click', e => {
    const i = e.target.tagName
    if (i === 'I') {
        document.querySelector('#nav').classList.toggle('d-flex')

    }

})